<template>
  <section id='foot_guide'>
    <section
      v-for="(item, index) in menuList"
      @click = "gotoAddress(item.address)"
      class="guide-item"
    >
      <img :src="activeTab === index ? item.activeIco : item.ico" :alt="item.name">
      <span :class="{active: activeTab === index}" v-text="item.name">-</span>
    </section>
  </section>
</template>

<script>
  export default {
    props: {
      activeTab: {
        type: Number,
        required: true,
        default: 0
      }
    },
    data () {
      return {
        menuList: [
          {
            name: '列表',
            ico: require('../../assets/images/hnico/ic_list.png'),
            activeIco: require('../../assets/images/hnico/ic_list_active.png'),
            address: '/maker'
          },
          {
            name: '匹配',
            ico: require('../../assets/images/hnico/ic_match.png'),
            activeIco: require('../../assets/images/hnico/ic_match_active.png'),
            address: '/hn'
          },
          {
            name: '消息',
            ico: require('../../assets/images/hnico/ic_msg.png'),
            activeIco: require('../../assets/images/hnico/ic_msg_active.png'),
            address: '/messages'
          },
          {
            name: '发布',
            ico: require('../../assets/images/hnico/ic_release.png'),
            activeIco: require('../../assets/images/hnico/ic_release_active.png'),
            address: '/release'
          },
          {
            name: '审核',
            ico: require('../../assets/images/hnico/ic_review.png'),
            activeIco: require('../../assets/images/hnico/ic_review_active.png'),
            address: '/review'
          },
          {
            name: '订单',
            ico: require('../../assets/images/hnico/ic_order.png'),
            activeIco: require('../../assets/images/hnico/ic_order_active.png'),
            address: '/makerOrder'
          },
          {
            name: '我的',
            ico: require('../../assets/images/hnico/ic_mine.png'),
            activeIco: require('../../assets/images/hnico/ic_mine_active.png'),
            address: '/makerPersonal'
          },
        ]
      }
    },
    methods: {
      gotoAddress(path){
        this.$router.push(path)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  #foot_guide{
    position: fixed;
    display: flex;
    @include wh(100%, 5rem);
    background-color: #fff;
    box-shadow: 0 -0.026667rem 0.053333rem rgba(0,0,0,.1);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 997;
  }
  .guide-item{
    display: flex;
    flex: 1;
    padding: .6rem;
    text-align: center;
    flex-direction: column;
    align-items: center;
    img {
      height: 2.2rem;
    }
    .icon_style{
      @include wh(.8rem, .8rem);
      margin-top: .3rem;
      fill: #ccc;
    }
    span{
      @include sc(1rem, #999);
      &.active {
        color: #dd65a1;
      }
    }
  }
</style>
